<template>
  <van-form @submit="onSubmit" class="visitor-container">
    <van-cell-group inset>
      <van-field
          v-model="username"
          name="来访人姓名"
          label="来访人姓名"
          placeholder="请输入姓名"
          required
          :rules="[{ required: true, message: '请输入来访人姓名' }]"
      />
      <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          required
          :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
          v-model="idCard"
          type="password"
          name="idCard"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: false, message: '请输入身份证号' }]"
      />
      <van-field
          v-model="result"
          is-link
          readonly
          name="picker"
          label="来访人数"
          placeholder="点击选择来访人数"
          required
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
          v-model="carNum"
          type="password"
          name="carNum"
          label="车牌号"
          placeholder="车牌号"
          :rules="[{ required: false, message: '请输入车牌号' }]"
      />

      <van-field
          v-model="results"
          is-link
          readonly
          name="picker"
          label="来访目的"
          placeholder="点击选择来访目的"
          required
          @click="showPickers = true"
      />
      <van-popup v-model:show="showPickers" position="bottom">
        <van-picker
            :columns="columnss"
            @confirm="onConfirms"
            @cancel="showPickers = false"
        />
      </van-popup>
      <van-field
          v-model="resultss"
          is-link
          readonly
          name="calendar"
          label="来访时间"
          placeholder="点击来访时间"
          @click="showCalendar = true"
      />
      <van-calendar v-model:show="showCalendar" @confirm="onConfirmss" />

      <van-field
          v-model="remark"
          type="textarea"
          name="remark"
          label="备注"
          placeholder="备注"
          :rules="[{ required: false, message: '请输入备注' }]"
      />

    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交来访登记
      </van-button>
    </div>
  </van-form>

</template>

<script setup lang="ts">
import { ref } from 'vue';
const username = ref('');
const phone = ref('');
const idCard = ref('');
const carNum = ref('');
const remark = ref('');
const onSubmit = (values: object) => {
  console.log('submit', values);
};
const result = ref('');
const results = ref('');
const resultss = ref('');
const showCalendar = ref(false);
const showPicker = ref(false);
const showPickers = ref(false);
const columns = [
  { text: '1人', value: '1' },
  { text: '2人', value: '2' },
  { text: '3人', value: '3' },
  { text: '4人', value: '4' },
  { text: '4人以上', value: 'n' },
];
const columnss = [
  { text: '业务来访', value: '1' },
  { text: '人员面试', value: '2' },
  { text: '参观访问', value: '3' },
  { text: '其他来访', value: '4' },
];

interface SelectedOptions {
  text: string;
  value: string;
}

const onConfirm = (selectedOptions: SelectedOptions[]) => {
  result.value = <string>selectedOptions[0]?.text;
  showPicker.value = false;
};
const onConfirms = (selectedOptions: SelectedOptions[]) => {
  results.value = <string>selectedOptions[0]?.text;
  showPickers.value = false;
};
const onConfirmss = (date: Date) => {
  resultss.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  showCalendar.value = false;
};

</script>

<style scoped lang="less">
  .visitor-container {
    margin: 16px auto;
  }
</style>
